import 'package:flutter/material.dart';

class StockTablePage extends StatefulWidget {
  const StockTablePage({super.key});

  @override
  State<StockTablePage> createState() => _StockPageState();
}

class _StockPageState extends State<StockTablePage> {
  final ScrollController verticalController = ScrollController(); // 同步垂直滚动
  final ScrollController rightHorizontalController =
      ScrollController(); // 右侧表格横向滚动

  final List<Map<String, String>> stockData = List.generate(
    20,
    (index) => {
      'name': '商品$index',
      'code': 'CODE$index',
      'price': '${(1000 + index * 5).toStringAsFixed(2)}',
      '涨跌':
          '${(index % 2 == 0 ? '+' : '-')}${(index * 0.5).toStringAsFixed(2)}',
      '幅度': '${(index * 0.1).toStringAsFixed(2)}%',
      '买价': '${(1000 + index * 5 - 2).toStringAsFixed(2)}',
      '卖价': '${(1000 + index * 5 + 2).toStringAsFixed(2)}',
    },
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("同步滚动表格")),
      body: Row(
        children: [
          // 左侧固定列
          SizedBox(
            width: 100, // 固定列宽度
            child: ListView.builder(
              controller: verticalController, // 绑定垂直滚动控制器
              itemCount: stockData.length + 1, // 包括表头
              itemBuilder: (context, index) {
                if (index == 0) {
                  return _buildFixedHeader();
                }
                return _buildFixedCell(stockData[index - 1]);
              },
            ),
          ),

          // 右侧滚动表格
          Expanded(
            child: SingleChildScrollView(
              scrollDirection: Axis.horizontal, // 横向滚动
              controller: rightHorizontalController, // 绑定横向滚动
              child: SizedBox(
                width: 600, // 表格宽度
                child: SingleChildScrollView(
                  scrollDirection: Axis.vertical, // 纵向滚动
                  controller: verticalController, // 绑定垂直滚动控制器
                  child: DataTable(
                    columnSpacing: 20, // 列间距
                    headingRowHeight: 50, // 表头高度
                    dataRowHeight: 40, // 行高
                    columns: const [
                      DataColumn(label: Text('代码')),
                      DataColumn(label: Text('现价')),
                      DataColumn(label: Text('涨跌')),
                      DataColumn(label: Text('幅度')),
                      DataColumn(label: Text('买价')),
                      DataColumn(label: Text('卖价')),
                    ],
                    rows: stockData
                        .map(
                          (data) => DataRow(
                            cells: [
                              DataCell(Text(data['code']!)),
                              DataCell(Text(data['price']!)),
                              DataCell(Text(data['涨跌']!)),
                              DataCell(Text(data['幅度']!)),
                              DataCell(Text(data['买价']!)),
                              DataCell(Text(data['卖价']!)),
                            ],
                          ),
                        )
                        .toList(),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  /// 左侧固定列表头
  Widget _buildFixedHeader() {
    return Container(
      height: 50,
      alignment: Alignment.center,
      decoration: BoxDecoration(
          color: Colors.grey[300],
          border: Border(bottom: BorderSide(color: Colors.black))),
      child: const Text('名称', style: TextStyle(fontWeight: FontWeight.bold)),
    );
  }

  /// 左侧固定列单元格
  Widget _buildFixedCell(Map<String, String> data) {
    return Container(
      height: 40,
      alignment: Alignment.center,
      decoration: BoxDecoration(
          color: Colors.grey[200],
          border: Border(bottom: BorderSide(color: Colors.black12))),
      child: Text(data['name']!),
    );
  }
}
